<template>
	<view class="mf-subject-wrap">
		<view class="mf-subject-title">
			<navigator url="../shopDetail/shopDetail?store_id=1&sort_id=132"></navigator>
			<view class="mf-subject-name">{{subjectName}}</view>
		</view>
		
		<view class="mf-subject-type-wrap" v-if="subjectTypeArr.length>1">
			<view :class="'mf-subject-type-item '+(subjectTypActive===index?'active':'')" v-for="(item,index) in subjectTypeArr" :key="index"
			@click="getGoodsList(item.sort_id,index)"
			>{{item.sort_name}}</view>
		</view>
		
		<view class="mf-goods-list-wrap">
			<view class="mf-goods-item" v-for="(item,index) in subjectGoodsArr" :key="index"
			 @tap="selectFormat($event)" :data-id="item.goods_id">
				<view class="mf-goods-img-wrap"><image :src="item.image"></image></view>
				<view class="mf-goods-name">{{item.name}}</view>
				<view class="mf-goods-sellcount">已售：{{item.sell_count}}</view>
				<view class="mf-goods-price-wrap">
					<view class="mf-goods-price">
						<text class="mf-goods-price-symbol">￥</text>
						<text>{{item.price}}</text>
						<text class="mf-goods-unit">/{{item.unit}}</text>
					</view>
				</view>
				<view class="mf-count-wrap">
					<count :goods="item" :refreshCount="refreshCount" @getGoods="getGoods"></count>
				</view>
			</view>
		</view>
		
		<!-- 底部购物车 -->
		<shopcart  :refreshCart="refreshCart" @getGoods="getGoods"></shopcart>

		<!-- 规格弹窗 -->
		<spec-mask :show="showSpecMask" :productId="specProductId" :refreshCount="refreshCount" @getGoods="getGoods"></spec-mask>
		
		<!-- 用户登录 -->
		<userinfo v-if="user_options" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
	</view>
</template>

<script>
import count from '../component/count/count';
import shopcart from '../component/shopcart/shopcart';
import specMask from '../component/spec-mask/spec-mask';
import goodsTip from '../component/goodsTip/goodsTip.vue'
import common from '../../../utils/common.js';
var app = getApp();
var _this;

export default {
	data() {
		return {
			ossImg:'https://jlmkkj.oss-accelerate.aliyuncs.com/',
			subjectTypActive:0,
			subjectId:0,
			subjectTypeArr:[],
			subjectGoodsArr:[],
			subjectName:'',
			shopFrontColor: 'ffffff',
			shopBackgroundColor: '113533',
			subject: {},
			store_id: '',
			storeInfo: '',
			store: {},
			goodsKeyList: {},
			// 当前加入购物车的相同商品的数量
			goodsSpecList: {},
			// 当前加入购物车的同一规格的商品数量
			refresh: false,
			// true 表示页面需要刷新
			isShare: 0,
			orderStatus: 0,
			activityImgH: 0, // 176*686
			mobile_head_color: '',
			show_age: false,
			age_status: '',
			needLogin: false,
			showSpecMask: false,
			specProductId: '',
			goodsNumList: [],
			user_options: '',
			refreshCart: false, // 通知购物车更新
			refreshCount: false, // 通知计数器更新
			currency: '¥'
		};
	},

	onUnload() {
		if (_this.refresh === '') {
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			prevPage.data.refresh = true;
		}
	},

	onShow() {
		if (!wx.getStorageSync('togetherId') && _this.isShare == 0) {
			_this.orderStatus = 0;
			_this.uid = '';
		}
		// 判断页面信息是否需要刷新
		if (_this.refresh === true) {
			// 请求列表数据
			getShopList();
			_this.refresh = '';
		}
		// #ifdef H5
		common.hideWxShare()
		// #endif
		
		if (app.globalData.storeCart) {
			_this.getGoods({action: 'updateCart'})
		}
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		this.subjectName = decodeURI(options.subname)
		this.subjectId = options.id
		_this = this;
		// 如果没有storeinfo信息，先去店铺详情页
		if(app.globalData.storeInfo == null) {
			uni.redirectTo({
			   url: `/pages/shop_new/shopDetail/shopDetail?store_id=${options.store_id}&frontColor=${options.frontColor}&backgroundColor=${options.backgroundColor}&share=true`
			});
		}

		if (options.frontColor && options.backgroundColor) {
			_this.shopFrontColor = options.frontColor
			_this.shopBackgroundColor = options.backgroundColor
		}

		wx.setNavigationBarColor({
			frontColor: '#' + _this.shopFrontColor,
			backgroundColor: '#' + _this.shopBackgroundColor
		});
		var systemInfo = wx.getSystemInfoSync();

		_this.store_id = options.store_id;
		_this.storeInfo = app.globalData.storeInfo;
		_this.activityImgH = (systemInfo.windowWidth * 176) / 686;
		_this.isShare = options.isShare;
		_this.orderStatus = options.orderStatus;
		_this.mobile_head_color = app.globalData.config.config.mobile_head_color;
		
		// 请求列表数据
		// getShopList();
		common.changeCurrency(this)
		
		// mf-获取分类列表
		this.getSubjectType()
	},

	components: {
		count,
		shopcart,
		specMask,
		goodsTip
	},
	props: {},
	methods: {
		getSubjectType(){
			var param = {
				id: this.subjectId,
			}
			
			uni.request({
				url:'https://www.jlmkkj.com/appapi.php?c=Mf&a=getSortsListbyId',
				data:param,
				success:res=>{
					const _typList = res.data.result
					const _sort_id = _typList[0]['sort_id']
					this.subjectTypeArr = _typList
					// 初始化获取产品列表
					this.getGoodsList(_sort_id)
				}
			})
			
		},
		
		getGoodsList(sort_id,index=0){
			// 为什么有清空数组这个傻逼操作？
			// count组件传入的goods属性是以object的形式传入的，不能强制刷新
			this.subjectGoodsArr = []
			this.subjectTypActive = index
			var param = {
				sort_id:sort_id,
				id: this.subjectId,
			}
			
			uni.request({
				url:'https://www.jlmkkj.com/appapi.php?c=Mf&a=getGoodsByIdAndSortId',
				data:param,
				success:res=>{
					const _goodsList = res.data.result.good_list
					console.log( res.data.result)
					this.subjectGoodsArr = _goodsList
				}
			})
		},
		getUserInfo (e) { },
		// 点击商品加减按钮
		getGoods(e) {
			console.log('商品详情页 getGoods', e)
			// 登录
			if (e.action == 'login') {
				_this.user_options = {
					toLogin: true,
					showWebMask: true
				}
			}
			
			// 打开规格商品弹窗
			if (e.action == 'openSpecMask') {
				_this.showSpecMask = true
				_this.specProductId = e.goodsId
				return 
			}
			
			// 关闭规格商品弹窗
			if (e.action == 'closeSpecMask') {
				_this.showSpecMask = false
				return
			}
			
			// 更新购物车
			if (e.action == 'updateCart') {
				_this.$nextTick(function(){
					_this.refreshCart = true
					_this.refreshCount = true
				})
				_this.selectType = app.globalData.storeCart ? app.globalData.storeCart.sort_num : {}
				return
			}
			
			// 更新购物车结束
			if (e.action == 'updateCartOver') {
				_this.$nextTick(function(){
					_this.refreshCart = false
					_this.refreshCount = false
				})
				return
			}
			
			// 清空购物车
			if (e.action == 'clearCart') {
				_this.selectType = {}
				_this.$nextTick(function(){
					_this.refreshCount = true
				})
				return
			}
		},

		// 打开商品详情
		selectFormat(e) {
			var product_id = '';

			if (e.product_id) {
				product_id = e.product_id;
			} else {
				product_id = e.currentTarget.dataset.id;
			}

			wx.navigateTo({
				url: `/pages/shop_new/goodsDetail/goodsDetail?store_id=${_this.store_id}&product_id=${product_id}&backgroundColor=${_this.shopBackgroundColor}&frontColor=${
					_this.shopFrontColor
				}&isShare=${_this.isShare}&orderStatus=${_this.orderStatus}`
			});
		}
	}
};

const getShopList = () => {
	common.post('Shop_new&a=shop_subject', { store_id: _this.store_id }, data => {
		if (data) {
			wx.setNavigationBarTitle({
				title: data.subject_name
			});
			data.good_list.map(goods => {
				if ((goods.is_seckill_price && goods.seckill_stock == 0) || (!goods.is_seckill_price && goods.stock == 0)) {
					goods.sold_out = true
				}
				return goods
			})
			_this.subject = data;
		}
	});
};

</script>
<style>
/* uni-page-body {
	background-color: #fff !important;
	height:auto !important;
	min-height: 100%;
} */	

.mf-subject-wrap {
	padding-bottom:25vw;
}	

.mf-subject-type-wrap {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin:0 auto 10upx;
}	

.mf-subject-type-item {
	padding: 0 20upx;
	margin-bottom:20upx;
	margin-right:30upx;
	height: 60upx;
	line-height: 60upx;
	font-size:14px;
	border:1px solid #ddd;
}

.mf-subject-type-item.active{
	color: #f60;
	border-color: #f60;
}
	
	
.mf-subject-title {
	height:166upx;
	padding-top:20upx;
	padding-left:40upx;
	margin-bottom:30upx;
	display: flex;
	align-items: center;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url('');
}

.mf-subject-title navigator{
	width:40upx;
	height:40upx;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('');
}

.mf-subject-name {
	margin-left:10upx;
	font-size:18px;
	font-weight: bold;
	color:#fff;
}

.mf-goods-list-wrap {
	width:90%;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
}

.mf-goods-item{
	width:28vw;
	padding:20upx 16upx 10upx;
	margin-left:3vw;
	margin-bottom:20upx;
	background-color: #f4f4f4;
	box-sizing: border-box;
	border-radius: 6px;
}

.mf-goods-item:nth-child(3n-2){
	margin-left:0;
}

.mf-goods-img-wrap image{
	width:100%;
	height:22vw;
}

.mf-goods-name {
	margin-top:10upx;
	font-size: 14px;
	height:14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: normal;
	line-height: 1;
}

.mf-goods-sellcount {
	font-size:12px;
	color:#595757;
	line-height: 2;
}

.mf-goods-price-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mf-goods-price {
	font-size:12px;
	color:#ff0000;
}

.mf-goods-price-symbol {
	font-size:8px;
}

.mf-goods-unit {
	font-size:14px;
}

.mf-count-wrap {
	margin-top:20upx;
	display: flex;
	justify-content: flex-end;
}

.mr5 {
	margin-right: 5px;
}
.border-b::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1rpx;
	right: 0;
	background: #e5e5e5;
	transform: scaleY(0.5);
}
.border-r::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1rpx;
	height: 100%;
	background: #e5e5e5;
	transform: scaleX(0.5);
}

.activity-img image {
	width: 100%;
	display: block;
}
.list {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 50px;
	padding-bottom: calc(50px + env(safe-area-inset-bottom));
	padding-bottom: calc(50px + constant(safe-area-inset-bottom));
}
.list .item {
	width: 50%;
	background: #fff;
	position: relative;
	padding: 10px 10px 0;
	box-sizing: border-box;
}
.list .item .goods-image {
	position: relative;
	width: 100%;
	text-align: center;
	padding-top: 100%;
	box-sizing: border-box;
}
.list .item .goods-image .sold-out {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 14px;
}
.list .item .goods-image .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.list .item .info {
	padding: 10px 0;
	position: relative;
}
.list .item .info.border-b::after {
	left: -10px;
	right: -10px;
}
.list .item .name {
	font-size: 16px;
	color: #333;
	margin-bottom: 0px;
}
.list .item .name .name-detail {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.list .num-box {
	font-size: 11px;
	color: #999;
	margin-bottom: 5px;
}
.list .num-box .num {
	margin-right: 5px;
}
.sale-box {
	font-size: 10px;
	color: #d45740;
}
.sale-box text {
	margin-right: 5px;
}

.list .num-box {
	font-size: 11px;
	color: #999;
	margin-bottom: 5px;
	height: 15px;
}
.list .num-box .num {
	margin-right: 5px;
}
.sale-box {
	font-size: 10px;
	color: #d45740;
}
.sale-box text {
	margin-right: 5px;
}
.sale-box .sale {
	border: 1rpx solid #f8e6e2;
	display: inline-block;
	padding: 0 3px;
	border-radius: 2px;
}
.price-box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 16px;
	line-height: 32px;
}
.price-box .price {
	color: #e23321;
}
.price-box .price .unit{
	font-size:12px;
    margin-left: 2px;
}
.price-box .price .old-price {
	text-decoration: line-through;
	color: #999;
	font-size: 12px;
}
.price-box .add-cart {
	background: #06c1ae;
	color: #fff;
	line-height: 28px;
	font-size: 12px;
	border-radius: 15px;
	padding: 0 10px;
	position: relative;
}
.price-box .add-cart.active {
	background: #999;
}
.price-box .add-cart .num {
	font-size: 10px;
	width: 16px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	background: #ff3c00;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	top: -9px;
	right: 0;
}

.shop-cart {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
.shop-cart .tips {
	background: #f1e6c9;
	font-size: 12px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #666;
}
.shop-cart .tips text {
	color: #e85b4d;
}
.shop-cart .cart {
	height: 50px;
	background-color: #32312e;
	color: #bababa;
	padding-left: 70px;
	font-size: 16px;
	position: relative;
}
.shop-cart .icon {
	position: absolute;
	left: 10px;
	top: -10px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background: #202020;
	border-radius: 50%;
}
.shop-cart .icon.active {
	background: linear-gradient(#06c1ae, #3ee451);
	color: #fff;
}
.shop-cart .icon .iconfont {
	font-size: 30px;
}
.shop-cart .icon .num {
	font-size: 10px;
	width: 18px;
	height: 18px;
	text-align: center;
	line-height: 18px;
	background: #ff3c00;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	top: -3px;
	right: -3px;
}
.shop-cart .info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
.shop-cart .left .total .price {
	font-size: 20px;
	color: #fff;
}
.shop-cart .left .total .fee {
	font-size: 12px;
}
.shop-cart .right {
	height: 100%;
	line-height: 50px;
}
.shop-cart .right.active {
	background: #06c1ae;
	color: #fff;
	padding: 0 30px;
}
</style>
